<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<div class="line-big">
	<div class="xl12">
		<div class="panel border-back">
			<div class="panel-body">
				<div class="line-big">
					<div class="xl5 text-left"></div>
					<div class="xl2 text-right">
						<div class="field field-icon-right" title="查找文章">
							<span class="icon icon-search" id="search_article_button"></span>
							<input type="text" class="input radius-rounded" id="keyword_of_article_input" value="${param.k }" placeholder="文章id,文章标题,文章导读" />
						</div>
					</div>
					<div class="xl5 text-left"></div>
				</div>

			</div>
			<div class="panel-foot bg-yellow-light border-back">
				<div class="line-big">
					<div class="xl4 text-center border-small border-right border-blue">文章标题</div>
					<div class="xl2 text-center border-small border-right border-blue">添加时间</div>
					<div class="xl2 text-center border-small border-right border-blue">更新时间</div>
					<div class="xl2 text-center border-small border-right border-blue">创建用户</div>
					<div class="xl2 text-center">操作</div>
				</div>
			</div>
			<ul class="list-group list-striped">
				<c:forEach items="${articleList}" var="a">
					<li id="li_${a.articleId }">
						<div class="line-big">
							<div class="xl4 text-left">
								<h4 title="${a.articleTips }">
									<a href="article/${a.articleId }" target="_blank"><strong>${a.articleName }</strong></a>
								</h4>
							</div>
							<div class="xl2 text-center">
								<fmt:formatDate value="${a.articleStartTime}" pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
							<div class="xl2 text-center">
								<fmt:formatDate value="${a.articleUpdateTime}" pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
							<div class="xl2 text-center">${a.userId}</div>
							<div class="xl2 text-center">
								<button class="button button-little bg-blue dialogs see_article_detail_button" data-toggle="click" data-target="#see_article_detail" data-mask="1" data-width="960px"
									data-url="shop/show_article_detail?commonStr=${a.articleId }">
									<span class="icon-eye"></span> 查看详情
								</button>
								<button class="article_need_update_button button button-little bg-blue" data-id="${a.articleId }">
									<span class="icon-pencil"></span> 修改
								</button>
							</div>
						</div>
					</li>
				</c:forEach>
			</ul>
			<div class="panel-foot bg-white border-back" id="article_list_pages" data-url="pages_button" data-index="${page.currentIndex}" data-pages="${page.totalPages}"
				data-href="admin/show_article_info_list?k=${param.k }&i="></div>
		</div>
	</div>
</div>
<div class="clearfix G-MarginTop100"></div>
<div style="display: none;" id="k" data-value="${param.k }"></div>
<div id="see_article_detail"></div>
<script type="text/javascript" src="js/pintuer.js"></script>
<script type="text/javascript">
	$(function()
	{
		$(".article_need_update_button").click(function()
		{
			$("#admin_div").load("shop/shop_update_article?id=" + $(this).attr("data-id"), {}, function()
			{

			});
		});

		$("#article_list_pages").load($("#article_list_pages").attr("data-url"),
		{
			"page.currentIndex" : $("#article_list_pages").attr("data-index"),
			"page.totalPages" : $("#article_list_pages").attr("data-pages"),
			"page.href" : $("#article_list_pages").attr("data-href")
		}, function()
		{
		});
		$("#article_list_pages").on("click", "button[data-url]", function()
		{
			$("#admin_div").load(encodeURI($(this).attr("data-url")), {}, function()
			{
			});
		});

		$("#search_article_button").click(function()
		{
			var keyword = $("#keyword_of_article_input").val();
			if (keyword.length <= 0)
			{
				return false;
			}
			$("#admin_div").load(encodeURI("shop/show_article_info_list?k=" + keyword), {}, function()
			{
			});
		});
		$("#keyword_of_article_input").keydown(function(event)
		{
			if (event.keyCode == 13)
			{
				$("#search_article_button").trigger("click");
			}
		});

	});
</script>